<template>
  <view style="padding-bottom: 10rpx;">
    <!-- 收支碳能量数量-->
    <uni-card :is-shadow="false">
		<view class="color-size">开票总金额：<span>{{ dataDetails.amount }}</span>元</view>
		<view class="color-size">开票订单：<span>{{ dataDetails.num }}</span>笔</view>
    </uni-card>

    <!-- 基本信息-->
    <uni-card title="基本信息" :is-shadow="false">
      <view>开票订单号：<span>{{ dataDetails.number }}</span></view>
      <view>发票抬头：<span>{{ dataDetails.title }}</span></view>
      <view>纳税人识别号：<span>{{ dataDetails.taxpayerNumberHide }}</span></view>
      <view>开票类型：
        <template v-for="(item, index) in dicts.ec_invoice_type">
          <template v-if="dataDetails.type == item.value">
            <uni-tag :text="item.text" size="small" :type="item.type"/>
          </template>
        </template>
      </view>
      <view>申请时间：<span>{{ dataDetails.createTime }}</span></view>
      <view v-if="dataDetails.status == 0">审核时间：<span>{{ dataDetails.completeTime }}</span></view>
      <view v-else>开票时间：<span>{{ dataDetails.completeTime }}</span></view>
      <view>开票状态：
        <template v-for="(item, index) in dicts.ec_invoice_order_status">
          <template v-if="dataDetails.status == item.value">
            <uni-tag :text="item.text" size="small" :type="item.type"/>
          </template>
        </template>
      </view>
      <view>发票接收邮箱：<span>{{ dataDetails.email }}</span></view>
      <view class="flex_between">
        <view>
          发票网页链接：<span>{{ dataDetails.invoiceUrl }}</span>
        </view>
        <view v-if="dataDetails.status == 1">
          <uni-icons type="paperclip" size="14" color="#00a660"></uni-icons>
          <text
              style="color: #00a660;font-size: 20rpx;"
              v-clipboard:copy="dataDetails.invoiceUrl"
              v-clipboard:success="clipboardSuccess"
              v-clipboard:error="clipboardError"
          >复制
          </text>
        </view>
      </view>
      <view>开票备注：<span v-if="dataDetails.remark">{{ dataDetails.remark }}</span><span v-else>暂无</span></view>
      <view v-if="dataDetails.status == 0">出票失败原因：<span>{{ dataDetails.checkRemark }}</span></view>
      <view v-else>出票备注：<span>{{ dataDetails.checkRemark }}</span></view>
      <view slot="actions" class="card-actions">
        <view v-if="dataDetails.status == 2" class="card-actions-item" @click="handleRevoke(dataDetails)">
          <uni-icons type="undo" size="18" color="#f3a73f"></uni-icons>
          <text class="card-actions-item-text" style="color: #f3a73f;">撤销</text>
        </view>
        <view v-if="dataDetails.status == 3 || dataDetails.status == 0" class="card-actions-item"
              @click="handleDelete(dataDetails)">
          <uni-icons type="trash" size="18" color="#f78989"></uni-icons>
          <text class="card-actions-item-text errorColor">删除</text>
        </view>
        <view class="card-actions-item" @click="invoiceOrder">
          <uni-icons type="list" size="18" color="#00a660"></uni-icons>
          <text class="card-actions-item-text themeColor">订单</text>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import {delInvoiceOrder, getInvoiceOrder, revokeInvoiceOrder} from "@/api/ec/console/fee/invoiceOrder";
import {getDictsByNameForUni} from "@/utils/dicts";

export default {
  data() {
    return {
      // 数据字典
      dicts: {
        // 提现状态
        ec_invoice_type: [],
        // 开票状态
        ec_invoice_order_status: [],
      },
      // 详情数据
      dataDetails: {},
    }
  },
  onLoad(option) {
    // 加载字典数据
    this.getDicts()
    // 获取参数
    this.dataDetails = JSON.parse(option.dataDetails)
  },
  created() {
    this.getInvoiceOrder();
  },
  methods: {
    // ===============================================================================================================
    // ==== 加载数据字典
    // ===============================================================================================================
    /**加载数据字典*/
    getDicts() {
      // 提现状态
      this.dicts.ec_invoice_type = getDictsByNameForUni("ec_invoice_type");
      // 开票状态
      this.dicts.ec_invoice_order_status = getDictsByNameForUni("ec_invoice_order_status");
    },
    /** 获取订单详情 */
    getInvoiceOrder() {
      this.$modal.loading();
      getInvoiceOrder(this.dataDetails.id).then(response => {
        uni.hideLoading();
        this.dataDetails = response.data;
        this.dataDetails.num = response.data.orderPayIds.split(",").length;
      }).catch(() => {
        uni.hideLoading();
      });
    },
    /** 撤销 */
    handleRevoke(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        content: '您确认要撤销开票申请吗？撤销开票后将系统将不在为您开具发票，您亦可重新申请开票。',
        confirmColor: '#00a660',
        success: function (res) {
          if (res.confirm) {
            let data = {id: item.id};
            revokeInvoiceOrder(data).then(() => {
              uni.hideLoading();
              uni.$emit('refreshInvoicesManageIndex');
              // 延迟500毫秒显示loading效果
              setTimeout(() => {
                // 执行查询的方法
                that.getInvoiceOrder(item.id);
                that.$modal.msgSuccess("撤销开票成功");
              }, 300)
            });
          } else {
          }
        }
      })
    },
    /** 删除 */
    handleDelete(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        content: '您确认要删除开票申请吗？删除后将无法恢复。',
        confirmColor: '#00a660',
        success: function (res) {
          if (res.confirm) {
            delInvoiceOrder(item.id).then(() => {
              uni.hideLoading();
              uni.$emit('refreshInvoicesManageIndex');
              that.$modal.msgSuccess("删除成功");
              // 延迟500毫秒显示loading效果
              setTimeout(() => {
                // 返回上级页面
                uni.navigateBack(1);
              }, 300)
            });
          } else {
          }
        }
      })
    },
    /** 开票订单 */
    invoiceOrder() {
      uni.navigateTo({url: './invoiceOrder?orderPayIds=' + this.dataDetails.orderPayIds});
    },
    /** 复制失败 */
    clipboardError() {
      this.$modal.msgError("复制失败");
    },
    /** 复制链接成功 */
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
  }
}
</script>

<style lang="scss" scoped>
.color-size {
  line-height: 48rpx;

  span {
    color: $uni-color-primary;
    font-size: 32rpx;
    padding-right: 8rpx;
    font-weight: bold;
  }
}

::v-deep .uni-collapse-item__title-box {
  padding: 0 30rpx;
}

::v-deep .uni-collapse-item__wrap-content {
  border-bottom: none;
  padding-bottom: 10rpx;
}

::v-deep .uniui-bottom {
  color: #ccc !important;
}

::v-deep .uni-collapse-item__title.uni-collapse-item-border {
  border-bottom: none;
}

.container {
  .content {
    padding: 0 50rpx;
    font-size: 14px;

    view {
      margin-bottom: 16rpx;
    }
  }

  span {
    font-weight: 600;
  }
}

page {
  background-color: $uni-bg-color;
}

.common-money {
  font-size: 40rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  line-height: 40rpx;
  margin-right: 15rpx;
}

.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  border-top: 1px #eee solid;
}

.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-actions-item-text {
  font-size: 12px;
  margin-left: 5px;
}
</style>
